<template>
	<d2-container v-loading="loading">
		<d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners">
			<div slot="header">
				<crud-search
					ref="search"
					:options="crud.searchOptions"
					@submit="handleSearch"
				/>
				<el-button-group>
					<el-button size="small" type="primary" @click="addRow"
						><i class="el-icon-plus" /> 新增</el-button
					>
				</el-button-group>
				<el-button
					size="small"
					type="primary"
					:disabled="loading"
					@click="handelSearch()"
					>同步标签</el-button
				>
				<crud-toolbar
					:search.sync="crud.searchOptions.show"
					:compact.sync="crud.pageOptions.compact"
					:columns="crud.columns"
					@refresh="doRefresh()"
					@columns-filter-changed="handleColumnsFilterChanged"
				/>
			</div>
		</d2-crud-x>
	</d2-container>
</template>

<script>
import * as api from "./api";
import { crudOptions } from "./crud";
import { d2CrudPlus } from "d2-crud-plus";
export default {
	name: "syncLabels",
	mixins: [d2CrudPlus.crud],
	props: {
		dictionaryRow: "",
		fans_item: [],
	},
	data() {
		return { loading: false };
	},
	watch: {
		fans_item() {
			this.doRefresh({ from: "_tags" });
		},
	},
	methods: {
		getCrudOptions() {
			return crudOptions(this);
		},
		pageRequest(query) {
			if (this.dictionaryRow != 0) {
				return api.GetList(query, this.dictionaryRow);
			} else {
				return api.GetList(query, "");
			}
		},
		addRequest(row) {
			d2CrudPlus.util.dict.clear();
			return api.createObj({
				name: row.name,
				official_account_management_id: this.dictionaryRow,
			});
		},
		updateRequest(row) {
			d2CrudPlus.util.dict.clear();
			return api.UpdateObj(row);
		},
		delRequest(row) {
			this.loading = true;
			return api
				.DelObj(row.id)
				.then(() => (this.loading = false))
				.catch(() => {
					this.loading = false;
					this.$message({
						type: "error",
						message: "删除失败",
					});
				});
		},
		doAfterRowChange() {
			this.$store.dispatch("d2admin/fansManage/_tags");
		},
		//标签同步
		handelSearch() {
			const query = this.crud.page;
			this.loading = true;
			api.syncObj(query)
				.then(() => {
					this.loading = false;
					this.$message({
						type: "success",
						message: "同步成功",
					});
				})
				.catch(() => {
					this.loading = false;
					this.$message({
						type: "error",
						message: "同步失败",
					});
				});
		},
	},
};
</script>

<style lang="scss" scoped>
.yxtInput {
	.el-form-item__label {
		color: #49a1ff;
	}
}
</style>
